<template>
  <div class="nearshop">
      <titletop :titlename="titlename"></titletop>
      <div class="content paddingtop">
        <div><span>当前位置</span><img src="../../static/img/position.png"/><span v-text="positionadd"></span></div>
        <div class="list" v-for="item in list">
          <div v-text="item.title"></div>
          <div v-text="item.address"></div>
          <div v-text="item.distance"></div>
          <div class="button">
            <div class="text" @click="gomap(item)">地图</div>
            <div class="line"></div>
            <div class="text" @click="callphone(item)">电话</div>
          </div>
        </div>
        <div id="mapaddress"></div>
      </div>
      <mt-actionsheet :actions="phonelist" v-model="sheetVisible" cancelText="取消">
              </mt-actionsheet>
  </div> 
</template>

<script>
import Mock from 'mockjs'
import titletop from 'components/title' 

export default {
  name: 'nearshop',
  props : [],
  data () {
    return {
      positionadd:'',
      thislat:116.505409,
      thislng:39.966351,
      titlename:'附近药店',
      sheetVisible: false,
      phonelist:[],
      list:[
        {'title':'廊坊市一笑堂大药房一店','address':'廊坊市广平区第一大街131号','distance':'100m','phone':'18434555454'},
        {'title':'廊坊市一笑堂大药房二店','address':'廊坊市广平区第二大街132号','distance':'100m','phone':'18610216740'},
        {'title':'廊坊市一笑堂大药房三店','address':'廊坊市广平区第三大街133号','distance':'100m','phone':'18732666636'}
      ]
    }
  },
  components: {
      titletop
  },
  methods : {
      gomap(item){
        this.$router.push({ name: 'mapdetail', query: item})
      },
      getaddress(){
        var _this = this;
        // 百度地图API功能
        var map = new BMap.Map("mapaddress");
        var point = new BMap.Point(this.thislat,this.thislng);
        map.centerAndZoom(point,12);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function(rs){
          var addComp = rs.addressComponents;
          _this.positionadd = addComp.province+ addComp.city+ addComp.district+ addComp.street+ addComp.streetNumber;
        });        
      },
      callphone(item){
        this.phonelist = [{
          name: item.phone,  
          method: this.realcall
        }] 
        this.sheetVisible = true
      },
      realcall(e){
        window.location.href = "tel:"+ e.name;
      }
  },
  mounted(){ 
      this.getaddress();
  }
}

</script>

<style lang="scss" scoped>
  $gray:#eeeeee;
  #mapaddress{
    display:none;
  }
  .list{
    border-top:1px solid $gray;
    .button{
      height: 1.5rem;
      display:flex;
      justify-content: space-around;
      border:1px solid $gray;
      .text{
        width:100%;
        margin:0 auto;
      }
      .line{
        height: 1.5rem;
        width:1px;
        background-color:$gray;
      }
    }
  }
</style>
